<template>
  <div class="app-container">
    <div class="components-container">
      <el-form ref="customer_form" :model="customer_form" label-width="120px" label-position="right">
        <fieldset>
          <legend>基本信息</legend>
          <el-row>
            <el-col :span="6">
              <el-form-item label="统一社会信用代码：" label-width="150px" prop="unify_social_credit_code">
                <el-input
                  v-model="customer_form.unify_social_credit_code"
                  placeholder="统一社会信用代码(不允许有空格)"
                  maxlength="30"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="客户姓名：" prop="customer_name">
                <el-input
                  v-model="customer_form.customer_name"
                  placeholder="客户姓名"
                  maxlength="10"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客户状态：" prop="customer_status">
                <el-select v-model="customer_form.customer_status" filterable clearable placeholder="请选择">
                  <el-option
                    v-for="item in option_customer_status"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客户类型：" prop="customer_type">
                <el-select v-model="customer_form.customer_type" filterable clearable placeholder="请选择">
                  <el-option
                    v-for="item in option_customer_types"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="电话：" prop="customer_mobile">
                <el-input
                  v-model="customer_form.customer_mobile"
                  placeholder="电话"
                  maxlength="20"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="传 真：" prop="customer_fax">
                <el-input
                  v-model="customer_form.customer_fax"
                  placeholder="传真"
                  maxlength="20"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户地址：" prop="customer_address">
                <el-input
                  v-model="customer_form.customer_address"
                  placeholder="客户地址"
                  maxlength="100"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
          </el-row>
        </fieldset>

        <fieldset>
          <legend>法人信息</legend>
          <el-row>
            <el-col :span="6">
              <el-form-item label="法人姓名：" prop="legal_name">
                <el-input
                  v-model="customer_form.legal_name"
                  placeholder="法人姓名"
                  maxlength="10"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="身份证号：" prop="legal_id_card">
                <el-input
                  v-model="customer_form.legal_id_card"
                  placeholder="身份证号"
                  maxlength="20"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="职务：" prop="legal_post">
                <el-input
                  v-model="customer_form.legal_post"
                  placeholder="职务"
                  maxlength="10"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
          </el-row>
        </fieldset>

        <fieldset>
          <legend>开票信息</legend>
          <el-row>
            <el-col :span="6">
              <el-form-item label="开票地址：" prop="invoice_address">
                <el-input
                  v-model="customer_form.invoice_address"
                  placeholder="开票地址"
                  maxlength="10"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="开户行：" prop="invoice_bank_deposit">
                <el-input
                  v-model="customer_form.invoice_bank_deposit"
                  placeholder="开户行"
                  maxlength="10"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="帐号：" prop="invoice_bank_account_number">
                <el-input
                  v-model.number="customer_form.invoice_bank_account_number"
                  placeholder="帐号"
                  maxlength="10"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
          </el-row>
        </fieldset>

        <fieldset>
          <legend>档案信息</legend>
          <el-row>
            <el-col :span="6">
              <el-form-item label="客户来源：" prop="customer_from">
                <el-input
                  v-model="customer_form.customer_from"
                  placeholder="客户来源"
                  maxlength="10"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否共享：">
                <el-select v-model="customer_form.customer_share" filterable clearable placeholder="请选择">
                  <el-option
                    v-for="item in option_YesOrNo"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客户等级：">
                <el-select v-model="customer_form.customer_level" filterable clearable placeholder="请选择">
                  <el-option
                    v-for="item in option_customer_level"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="上海市资助信息：" label-width="130px" prop="customer_is_subsidize">
                <el-select v-model="customer_form.customer_is_subsidize" filterable clearable placeholder="请选择">
                  <el-option
                    v-for="item in option_YesOrNo"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客户管理人：" prop="customer_account_managers">
                <el-input
                  v-model="customer_form.customer_account_managers"
                  placeholder="客户管理人"
                  maxlength="10"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
          </el-row>
        </fieldset>

        <el-row style="text-align: right;">
          <span
            style="text-decoration:underline;font-size: 12px;margin-right: 20px;"
            @click="resetCustomerForm('customer_form')"
          >取消</span>
          <el-button type="primary" @click="submitCustomerForm('customer_form')">保存</el-button>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<style>
fieldset {
  border: 1px solid #e6ebf5;
  margin: 10px 0 10px 0;
}

legend {
  font-size: 13px;
  padding: 0 10px 0 10px;
}

.el-input__inner {
  height: 30px;
  line-height: 30px;
}
</style>
<script>
// import { createNotice, fetchNotice } from '@/api/notice'
import { searchUser } from '@/api/remote-search'

const defaultForm = {
  id: undefined,
  unify_social_credit_code: '', // 统一社会信用代码
  customer_name: '', // 客户姓名
  customer_status: 1, // 客户状态
  customer_type: 1, // 客户类型
  customer_address: '', // 客户地址
  customer_mobile: '', // 客户电话
  customer_fax: '', // 客户传真
  legal_name: '', // 法人姓名
  legal_id_card: '', // 法人身份证号
  legal_post: '', // 法人职务

  invoice_address: '', // 发票地址
  invoice_bank_deposit: '', // 开户行
  invoice_bank_account_number: '', // 发票信息账号

  customer_from: '', // 客户来源
  customer_share: 0, // 客户是否分享
  customer_level: 1, // 客户等级
  customer_is_subsidize: 0, // 客户是否被当地资助
  customer_account_managers: '', // 客户管理人

  create_date: '' // 客户创建时间
}

export default {
  name: 'NoticeDetail',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      activeName: 'first',
      customer_form: Object.assign({}, defaultForm),
      loading: false,
      option_customer_status: [{ value: 1, label: '潜在' }, { value: 2, label: '目标' }, {
        value: 3,
        label: '立项'
      }, { value: 4, label: '关怀' }, { value: 5, label: '签约' }, { value: 6, label: '谈判' }, {
        value: 7,
        label: '价值'
      }],
      option_customer_types: [{ value: 1, label: '客户' }, { value: 2, label: '当事人' }],
      option_YesOrNo: [{ value: 1, label: '是' }, { value: 0, label: '否' }],
      option_customer_level: [{ value: 1, label: '立案客户' }, { value: 2, label: '高级客户' }, {
        value: 3,
        label: '中级客户'
      }, { value: 4, label: '低级客户' }],
      timeNow: new Date(),
      tempRoute: {}
    }
  },
  computed: {
    contentShortLength() {
      return this.postForm.content_short.length
    },
    displayTime: {
      get() {
        return (+new Date(this.postForm.display_time))
      },
      set(val) {
        this.postForm.display_time = new Date(val)
      }
    }
  },
  created() {
    if (this.isEdit) {
      const id = this.$route.params && this.$route.params.id
      this.fetchData(id)
    }
    this.tempRoute = Object.assign({}, this.$route)
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    fetchData(id) {
      // fetchNotice(id).then(response => {
      //   this.postForm = response.data
      //   this.postForm.first_pic = response.data.first_pic
      //   // set tagsview title
      //   this.setTagsViewTitle()
      // }).catch(err => {
      //   console.log(err)
      // })
    },
    setTagsViewTitle() {
      const title = '编辑公告'
      const route = Object.assign({}, this.tempRoute, { title: `${title}` })
      this.$store.dispatch('tagsView/updateVisitedView', route)
      document.title = `${title}`
    },
    resetCustomerForm(formName) {
      this.$refs[formName].resetFields()
    },
    submitCustomerForm(formName) {
      let message = '发布文章成功'
      if (this.isEdit) {
        message = '更新文章成功'
      }
      console.log(this.postForm, message)
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading = true
          // createNotice(this.postForm).then(res => {
          //   this.loading = false
          //   console.log(res)
          //   this.$notify({
          //     title: '成功',
          //     message: message,
          //     type: 'success',
          //     duration: 2000
          //   })
          // })
          this.loading = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getRemoteUserList(query) {
      searchUser(query).then(response => {
        if (!response.data.items) return
        this.userListOptions = response.data.items.map(v => v.name)
      })
    }
  }
}
</script>
